import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';

/*
React元素不但可以是DOM标签，还可以是用户自定义的组件
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 props
组件名称必须以大写字母开头
组件必须在使用的时候定义或引用它
组件的返回值只能有一个根元素

定义组件有两种方式 函数式组件和类组件
函数式组件就是一个函数，接受一个属性对象并返回React元素
*/
const root: HTMLElement | null = document.getElementById('root');

interface Props {
  name: string;
}

/* 函数组件的执行
1. 收集属性对象 props {name:'ahhh',age:10}
2. 会把props对象传入Welcome函数，并得到一个返回值 React元素

现在也拥有类组件曾独有的功能
通过hooks ...
*/
/*function Welcome(props:Props):React.ReactElement{
  return (
    <>
      <h1>hello {props.name}</h1>
    </>
  );
}*/
const Welcome: React.FunctionComponent<Props> = (props: Props): React.ReactElement => {
  return <h1>hello {props.name}</h1>;
};

/* 类组件

类组件的执行:
1. 收集属性对象 props {name:'ahhh',age:10}
2. 会把props对象传入Welcome构造函数，并得到Welcome类的实例
3. 调用render方法获取返回值，也是一个React元素
*/
class Welcome2 extends React.Component<Props>{
  render():React.ReactElement {
    return <h1>hello {this.props.name}</h1>;
  }
}

const Welcome3: React.ComponentClass<Props> = Welcome2;

// ReactDOM.render(<Welcome name="ahhh" />, root);
// ReactDOM.render(<Welcome2 name="ahhh" />, root);
ReactDOM.render(<Welcome3 name="ahhh" />, root);
